<template>
  <div>
<!--    收藏夹{{subject_id}}{{subject_name}}-->
    <div>
      <el-radio-group v-model="currentType" @change="typeChange">
        <el-radio :label="item.value" v-for="item,index in types" :key="index">{{item.name}}</el-radio>
      </el-radio-group>
    </div>
    <div class='question_woring_list'>
        <div class="collect" v-for="item,index in quesionList.rows" :key="index">
            <div class="question-content" v-html="item.topic.stem"></div>
            <el-button type="primary" size='small'  @click="lookError(item.topic.id)">查看</el-button>
        </div>
      <el-empty v-if="!isNull" image-size="200" description="暂无错题" />
    </div>
    <div class="bottom-div">
      <div>
        <el-button :disabled="quesionList && quesionList.rows && !quesionList.rows.length" type="primary" @click="questionAll">
          练习全部题目
        </el-button>
      </div>
      <div v-if="quesionList.pagination">
        <el-pagination
                background
                v-model:currentPage="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="quesionList.pagination.count"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
  import goBackHistory from "../../../utils/hook/goBackHistory";
  import {toRefs,reactive,watchEffect,watch} from 'vue'
  import {collect, errorSet, getCollectTopics, typeCodeList,collectRemove} from "../../../api/api";
  import {useRouter} from "vue-router";
  export default {
    name: "index",
    props:{
      subject_id:{
        type:Number
      },
      subject_name:{
        type:String
      },
    activeCourse:{
        type:String
    }
    },
    setup(props){
      //收藏夹列表
      let data = reactive({
        pageSize:10,
        currentPage:1,
        quesionList:[],
        question_types:[],
        isNull:false,
        currentType: null,
        types: [{name: "全部", value: null},
          {name: "单项选择题", value: 1},
          {name: "多项选择题", value: 2},
          {name: "不定项选择题", value: 3},
          {name: "判断题", value: 4},
          {name: "填空题", value: 5},
          {name: "简答题", value: 6},
          {name: "论述题", value: 7},
          {name: "案例题", value: 8},
          {name: "综合题", value: 9},
          {name: "平台操作题", value: 10}]
      })
      let router = useRouter();
      let getErrorSet =  () => {
        errorSet({courseID:localStorage.getItem('activeCourse'),typeCode:data.currentType,page:data.currentPage,pageSize:data.pageSize}).then(res =>{
          console.log('错题集列表',res.data)
          data.quesionList = res.data
          data.isNull = res.data.rows.length ? true:false
        })
      }
      getErrorSet();

        watch(() => props.activeCourse,() =>{
            getErrorSet();
        })


      const handleSizeChange = (val) => {
        console.log(`${val} items per page`)
        data.pageSize = val;
        getErrorSet();
      }
      const handleCurrentChange = (val) => {
        console.log(`current page: ${val}`)
        data.currentPage = val;
        getErrorSet();
      }

      let lookError = (e_id) =>{
        router.push({name:'Collect_or_Question',params:{subject_name:localStorage.getItem('activeCourseName'),id:e_id,method:'collectTopic'}})
      }

      let questionAll = () =>{
        router.push({name:'Collect_or_QuestionAll',params:{subject_name:localStorage.getItem('activeCourseName'),topicIDs:JSON.stringify([]),type:2,isCourse:true,method:'collectTopics'}})
      }

      let typeChange = (value) => {
        getErrorSet();
      }
      return{
        typeChange,
        lookError,
        questionAll,
        handleSizeChange,
        handleCurrentChange,
        ...toRefs(data)
      }
    }
  }
</script>


<style scoped>
    .question-content{
        width: 90%;
    }
    .question-content >>> p{
        width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
  .bottom-div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin:30px 0 20px 0;
  }
  .collect{
    width: 100%;
    margin: 10px 0px;
    display: flex;
    font-size: 14px;
    color:#606266;
    justify-content: space-between;
  }
  .question_woring_list{
    margin-top:30px;
  }
</style>
